<template>
    <el-autocomplete
        clearable
        v-model="state"
        type="textarea"
        class="width_100"
        placeholder="请选择"
        popper-class="my-autocomplete"
        :fetch-suggestions="querySearch"
        :autosize="{ minRows: 1, maxRows: 2 }"
        @select="handleSelect"
    >
      <template #default="{ item }">
        <div class="value">{{ item.value }}</div>
      </template>
    </el-autocomplete>
  </template>
  
<script lang="ts" setup>
import _ from 'lodash';
import { productCustomerProductSearch } from '~/src/api/dms/product';
import { onMounted, ref } from 'vue'


const props = defineProps({
    value: {
        type: String,
        default: '',
    },
    type: {
        type: String,
        default: 'product_number',
    },
    apiType: {
        type: Number,
        default: 2,
    },
    multiple: {
        type: Boolean,
        default: false,
    },
    clearable: {
        type: Boolean,
        default: true,
    },
})


const proxy: any = getCurrentInstance()?.proxy
const page = ref(1)
const loading = ref(false)
const isVisibleChange = ref(false)
const hasMore = ref(true)

const selectValue = ref<any>()
const sreachValue = ref<any>('')
const selectOptions = ref<any[]>([])

const emit = defineEmits(['LazyChange'])

const state = ref('')
const links = ref<any[]>([])

const querySearch = (queryString: string, cb) => {
    const results = queryString
        ? selectOptions.value.filter(createFilter(queryString))
        : selectOptions.value
    cb(results)
}
const createFilter = (queryString) => {
    return (restaurant) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

/**
 * 加载数据列表
 */
const loadDataList = async () => {
    try {
        loading.value = true

        // 参数
        let data = {
            page: 1,
            type: props.apiType,
            limit: 300,
            filter: {
                customer_number: props.type == 'customer_number' ? sreachValue.value : '', // 物料编码
                customer_name: props.type == 'customer_name' ? sreachValue.value : '', // 物料编码
                product_number: props.type == 'product_number' ? sreachValue.value : '', // 物料编码
                product_name: props.type == 'product_name' ? sreachValue.value : '', // 物料编码
            },
        }

        // api
        const res = await productCustomerProductSearch({ ...data })

        // 遍历获取
        const list = res.data.list.map((item: any) => {
            if (props.type == 'product_number') return { value: item.product_number, link: item.product_number }
        }) || []

        if (page.value == 1) selectOptions.value = []

        // 添加新的数据
        selectOptions.value.push(...list)

        // 是否进行加载数据
        hasMore.value = selectOptions.value.length < res.data.count

        loading.value = false

    } catch (err) {
        console.error(err)
    } finally {
        loading.value = false
    }
}
const handleSelect = (item: any) => {
}

onMounted(() => {
    loadDataList()
})
</script>
  
<style>
.my-autocomplete li {
    line-height: normal;
    padding: 7px;
}

.my-autocomplete li .name {
    text-overflow: ellipsis;
    overflow: hidden;
}

.my-autocomplete li .addr {
    font-size: 12px;
    color: #b4b4b4;
}

.my-autocomplete li .highlighted .addr {
    color: #ddd;
}
</style>
  